<template>
  <view class="signin-container">
    <!-- 渐变背景 -->
    <view class="background-gradient"></view>
    
    <!-- 教师信息卡片 -->
    <view class="teacher-card" :class="{'signed': isSigned}">
      <!-- 头像带波纹动画 -->
      <view class="avatar-container">
        <image class="teacher-avatar" :src="teacher.avatar" mode="aspectFill"></image>
        <view class="ripple" v-if="!isSigned"></view>
      </view>
      
      <!-- 教师信息 -->
      <view class="teacher-info">
        <text class="teacher-name">{{teacher.name}}</text>
        <text class="teacher-department">{{teacher.department}}</text>
      </view>
      
      <!-- 签到状态 -->
      <view class="signin-status">
        <view class="status-icon">
          <uni-icons 
            :type="isSigned ? 'checkmarkempty' : 'closeempty'" 
            size="24" 
            :color="isSigned ? '#4CAF50' : '#F44336'"
          ></uni-icons>
        </view>
        <text class="status-text">{{isSigned ? `已签到 ${signinTime}` : '等待签到'}}</text>
      </view>
    </view>
    
    <!-- 签到按钮 -->
    <button 
      class="signin-button" 
      :class="{'signed': isSigned}" 
      @click="showKeypad"
      :disabled="isSigned"
    >
      {{isSigned ? '签到完成' : '立即签到'}}
      <view class="button-wave" v-if="!isSigned"></view>
    </button>
    
    <!-- 数字键盘弹窗 -->
    <uni-popup ref="keypad" type="bottom" :mask-click="false">
      <view class="keypad-container">
        <!-- 键盘标题 -->
        <view class="keypad-header">
          <text class="keypad-title">请输入4位签到码</text>
          <view class="code-display">
            <view 
              class="code-digit" 
              v-for="(digit, index) in codeDigits" 
              :key="index"
              :class="{'filled': digit !== '', 'active': currentDigit === index}"
            >
              {{digit || ''}}
              <view class="cursor" v-if="currentDigit === index && !digit"></view>
            </view>
          </view>
        </view>
        
        <!-- 键盘主体 -->
        <view class="keypad-body">
          <view class="keypad-row" v-for="(row, rowIndex) in keypadLayout" :key="rowIndex">
            <view 
              class="keypad-key" 
              v-for="(key, keyIndex) in row" 
              :key="keyIndex"
              @touchstart="pressKey(key)"
              @touchend="releaseKey"
              :class="{
                'special-key': key === 'C' || key === '⌫',
                'empty-key': key === '',
                'pressed': pressedKey === key
              }"
            >
              <template v-if="key === '⌫'">
                <uni-icons type="backspace" size="28" color="#2196F3"></uni-icons>
              </template>
              <template v-else>
                {{key}}
              </template>
            </view>
          </view>
        </view>
        
        <!-- 键盘底部按钮 -->
        <view class="keypad-footer">
          <button class="cancel-button" @click="closeKeypad">取消</button>
          <button 
            class="confirm-button" 
            @click="confirmSignin" 
            :disabled="codeDigits.join('').length !== 4"
            :class="{'active': codeDigits.join('').length === 4}"
          >
            确认签到
          </button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 签到成功动画 -->
    <view class="success-animation" v-if="showSuccess">
      <view class="success-circle" v-for="(circle, index) in 3" :key="index" 
            :style="{
              animationDelay: `${index * 0.2}s`,
              transform: `scale(${0.7 + index * 0.3})`
            }"></view>
      <uni-icons type="checkmark-circle-filled" size="80" color="#4CAF50"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      teacher: {
        name: "张教授",
        department: "计算机科学与技术学院",
        avatar: "/static/aver1.jpg",
      },
      isSigned: false,
      signinTime: "",
      codeDigits: ["", "", "", ""],
      currentDigit: 0,
      showSuccess: false,
      pressedKey: null,
      keypadLayout: [
        ["1", "2", "3"],
        ["4", "5", "6"],
        ["7", "8", "9"],
        ["C", "0", "⌫"]
      ]
    }
  },
  methods: {
    showKeypad() {
      this.$refs.keypad.open();
      this.codeDigits = ["", "", "", ""];
      this.currentDigit = 0;
    },
    
    closeKeypad() {
      this.$refs.keypad.close();
    },
    
    pressKey(key) {
      this.pressedKey = key;
      
      if (key === "C") {
        // 清空
        this.codeDigits = ["", "", "", ""];
        this.currentDigit = 0;
      } else if (key === "⌫") {
        // 退格
        if (this.currentDigit > 0) {
          this.currentDigit--;
          this.codeDigits[this.currentDigit] = "";
        }
      } else if (this.currentDigit < 4) {
        // 输入数字
        this.codeDigits[this.currentDigit] = key;
        this.currentDigit++;
      }
    },
    
    releaseKey() {
      this.pressedKey = null;
    },
    
    confirmSignin() {
      const code = this.codeDigits.join("");
      if (code.length !== 4) {
        uni.showToast({
          title: '请输入4位签到码',
          icon: 'none'
        });
        return;
      }
      
      // 验证密码（假设正确密码是"0000"）
      if (code === "0000") {
        this.signinTime = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        this.isSigned = true;
        this.closeKeypad();
        this.showSuccessAnimation();
        
        uni.showToast({
          title: '签到成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '签到码错误',
          icon: 'none'
        });
        this.codeDigits = ["", "", "", ""];
        this.currentDigit = 0;
      }
    },
    
    showSuccessAnimation() {
      this.showSuccess = true;
      setTimeout(() => {
        this.showSuccess = false;
      }, 2000);
    }
  }
}
</script>

<style lang="scss">
/* 设计变量 */
$primary-color: #2196F3;
$secondary-color: #4CAF50;
$danger-color: #F44336;
$warning-color: #FF9800;
$light-blue: #E3F2FD;
$light-green: #E8F5E9;
$light-text: #757575;
$dark-text: #212121;

/* 基础容器 */
.signin-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  box-sizing: border-box;
  overflow: hidden;
}

/* 渐变背景 */
.background-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
  z-index: -1;
}

/* 教师卡片 */
.teacher-card {
  width: 100%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
  transition: all 0.3s ease;
  
  &.signed {
    border-left: 8rpx solid $secondary-color;
    background: rgba(255, 255, 255, 0.95);
  }
}

/* 头像容器 */
.avatar-container {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 30rpx;
  
  .teacher-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4rpx solid white;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: relative;
  }
  
  .ripple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba($primary-color, 0.2);
    animation: ripple 2s infinite;
    z-index: 1;
  }
}

/* 教师信息 */
.teacher-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  
  .teacher-name {
    font-size: 36rpx;
    font-weight: 600;
    color: $dark-text;
    margin-bottom: 10rpx;
  }
  
  .teacher-department {
    font-size: 28rpx;
    color: $light-text;
  }
}

/* 签到状态 */
.signin-status {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  
  .status-icon {
    margin-right: 10rpx;
  }
  
  .status-text {
    font-size: 28rpx;
    font-weight: 500;
  }
}

/* 签到按钮 */
.signin-button {
  width: 100%;
  max-width: 600rpx;
  height: 90rpx;
  border-radius: 12rpx;
  background: linear-gradient(90deg, $primary-color, #42A5F5);
  color: white;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
  
  &.signed {
    background: $secondary-color;
    box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.3);
  }
  
  &:disabled {
    opacity: 0.7;
  }
  
  .button-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
    animation: wave 2s infinite;
  }
}

/* 数字键盘 */
.keypad-container {
  width: 50%;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding: 40rpx;
  box-sizing: border-box;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.keypad-header {
  margin-bottom: 40rpx;
  text-align: center;
  
  .keypad-title {
    font-size: 32rpx;
    font-weight: 500;
    color: $dark-text;
    margin-bottom: 30rpx;
  }
}

.code-display {
  display: flex;
  justify-content: center;
  margin: 30rpx 0;
  
  .code-digit {
    width: 80rpx;
    height: 100rpx;
    margin: 0 20rpx;
    border-bottom: 2rpx solid #BDBDBD;
    font-size: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $dark-text;
    position: relative;
    
    &.filled {
      border-bottom-color: $primary-color;
      color: $primary-color;
    }
    
    &.active {
      border-bottom-color: $primary-color;
    }
    
    .cursor {
      position: absolute;
      width: 2rpx;
      height: 40rpx;
      background: $primary-color;
      animation: blink 1s infinite;
    }
  }
}

.keypad-body {
  margin-bottom: 30rpx;
}

.keypad-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.keypad-key {
  width: 22%;
  height: 100rpx;
  border-radius: 12rpx;
  background: #F5F5F5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 44rpx;
  font-weight: 500;
  color: $dark-text;
  transition: all 0.1s ease;
  
  &.pressed {
    background: #E0E0E0;
    transform: scale(0.95);
  }
  
  &.special-key {
    color: $primary-color;
  }
  
  &.empty-key {
    visibility: hidden;
  }
}

.keypad-footer {
  display: flex;
  justify-content: space-between;
  
  button {
    flex: 1;
    height: 80rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 500;
    margin: 0 20rpx;
    border: none;
    transition: all 0.2s ease;
  }
  
  .cancel-button {
    background: #EEEEEE;
    color: $light-text;
    
    &:active {
      background: #E0E0E0;
    }
  }
  
  .confirm-button {
    background: rgba($primary-color, 0.1);
    color: $primary-color;
    
    &.active {
      background: $primary-color;
      color: white;
    }
    
    &:active {
      transform: scale(0.98);
    }
  }
}

/* 成功动画 */
.success-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .success-circle {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 2rpx solid rgba($secondary-color, 0.5);
    animation: expand 1.5s ease-out forwards;
  }
}

/* 动画定义 */
@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes wave {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes expand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* 平板横屏优化 */
@media (min-width: 768px) and (orientation: landscape) {
  .teacher-card {
    max-width: 800rpx;
    padding: 60rpx;
  }
  
  .avatar-container {
    width: 200rpx;
    height: 200rpx;
  }
  
  .teacher-name {
    font-size: 44rpx;
  }
  
  .teacher-department {
    font-size: 32rpx;
  }
  
  .signin-button {
    max-width: 800rpx;
    height: 120rpx;
    font-size: 36rpx;
  }
  
  .keypad-key {
    height: 120rpx;
  }
  
  .code-digit {
    width: 100rpx;
    height: 120rpx;
  }
}
</style>